<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <title>ch1207</title>
</head>

<body>
  <script src="https://webapi.amap.com/maps?v=2.0&key=0b64d7017b72ce1aa826c96b688d8db1"></script>
  <div id="app"></div>
  <!-- built files will be auto injected -->
  <script>
    // 自适应移动端页面
    (() => {
      function setRem() {
        var uWidth = 375; // 设计稿的宽度
        // 获取屏幕的宽度
        var clientWidth = document.documentElement.clientWidth;
        console.log('设置font-size');
        // document.documentElement.style.fontSize = clientWidth / uWidth * 10 + 'px';
        if (document.documentElement.clientWidth > 500) {
          document.documentElement.style.fontSize = 500 / uWidth * 10 + 'px';
        } else {
          document.documentElement.style.fontSize = clientWidth / uWidth * 10 + 'px';
        }
      }
      setRem();
      let timer;
      window.onresize = () => {
        clearTimeout(timer);
        timer = setTimeout(() => {
          console.log('换手机。。');
          setRem();
        }, 300);
      };
    })();
  </script>
</body>

</html>